import React from "react";
import { Link } from "react-router-dom";
var account = window.localStorage.getItem('account')
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: [],
            arr1: [],
            tabIndex: -1
        }
    }
    componentDidMount() {
        this.$axios
            .get(
                "https://apipc-xiaotuxian-front.itheima.net/home/category/head"
            )
            .then(res => {
                // console.log(res);
                if (res.data.msg == '操作成功') {
                    this.setState({
                        arr: res.data.result
                    });
                }

            });
    }
    over(index) {
        this.setState({
            tabIndex: index
        })
    }
    out() {
        this.setState({
            tabIndex: -1
        })
    }
    clk() {
        window.localStorage.clear()
    }
    render() {
        return <div>
            <div className="top">
                <div className="commonwidth">
                    <ul>
                        {!account ? <li><Link to={'/login'}>请先登录</Link></li> : <li><a href="">{account}</a></li>}
                        {!account ? <li><a href="">免费注册</a></li> : <Link to={'/login'} onClick={this.clk.bind(this)}>退出登录</Link>}
                        <li><a href="">我的订单</a></li>
                        <li><a href="">会员中心</a></li>
                        <li><a href="">帮助中心</a></li>
                        <li><a href="">关于我们</a></li>
                        <li><a href="">手机版</a></li>
                    </ul>
                </div>
            </div>
            <div className="commonwidth fle">
                <div className="logo"></div>
                <ul>
                    {this.state.arr.length > 0 &&
                        <li className="c"><a href="/#/">首页</a></li>
                    }
                    {
                        this.state.arr.map((i, index) => {
                            return <li className="showInfo" key={index} onMouseOver={this.over.bind(this, index)} onMouseOut={this.out.bind(this)}>
                                <Link to={'/category/' + i.id}>{i.name}</Link>
                                <div className={`layer ${index == this.state.tabIndex && 'shou'}`}>
                                    <ul>
                                        {i.children.map((item, index) => {
                                            return <li key={index}>
                                                <img src={item.picture} alt="" />
                                                <span>{item.name}</span>
                                            </li>
                                        })}

                                    </ul>
                                </div>
                            </li>
                        })
                    }
                </ul>
                <Link to={'/cart'}>购物车</Link>

            </div >
        </div >
    }
}